import React, {Component} from 'react';
import TopNav from './topNav/topNav'
import {connect} from 'react-redux';
import { setTopNav } from '../../store/public/action';
import './top.scss'
import '../../static/css/icon.css';

import Mock from 'mockjs';
import axios from 'axios';

Mock.mock('/topnav',{
    "data":[
        {
            "navtitle": "木门定制",
            "navdata": [
                {
                    "navid": 1,
                    "navprops":"list",
                    "navname": "卧室门"
                },
                {
                    "navid": 2,
                    "navprops":"list",
                    "navname": "安全门"
                },
                {
                    "navid": 22,
                    "navprops":"list",
                    "navname": "防盗门"
                }
            ]
        },
        {
                "navtitle": "厨房定制",
                "navdata": [
                    {
                        "navid": 3,
                        "navprops":"homelist",
                        "navname": "厨房装修"
                    },
                    {
                        "navid": 4,
                        "navprops":"homelist",
                        "navname": "厨房格调"
                    }
                ]

        },
        {
                "navtitle": "榻榻米定制",
                "navdata": [
                    {
                        "navid": 5,
                        "navprops":"homelist",
                        "navname": "复古榻榻米"
                    },
                    {
                        "navid": 6,
                        "navprops":"homelist",
                        "navname": "潮流榻榻米"
                    }
                ]
        }
        ]
    }
)


class Top extends Component {


    constructor(props) {
        super(props);
        this.state = {
            isShowTopNav: false,
            num: 0
        };
        this.showTopNav = this.showTopNav.bind(this);
    }

    componentWillMount() {
        axios.get('http://shopapi.3d-home.cn/navigation')
            .then(response=>{
                //console.log(response.data.data.navigation);
                this.props.setTopNav(response.data.data.navigation)
                //console.log(response.data)
            })
    }

    onBack = () => {
        this.props.Tophistory.goBack();
    }

    showTopNav = () => {
        if (this.state.isShowTopNav === true) {
            this.setState({
                isShowTopNav : false
            })
        } else {
            this.setState({
                isShowTopNav : true
            })
        }
    }

    render() {
        let tamp ;
        if (this.state.isShowTopNav) {
            tamp = <TopNav></TopNav>;
        } else if (!this.state.isShowTopNav) {
            tamp = '';
        }
        return (
            <div>
                <div className='top'>
                    <div className='title'>
                        <span>{this.props.titleName}</span>
                        <div className='back'><i onClick={this.onBack} className="iconfont">&#xe679;</i></div>
                        <div className='search'><i className="iconfont">&#xe65c;</i></div>
                        <div className='category' onClick={this.showTopNav}><i className="iconfont">&#xe636;</i></div>
                    </div>
                    {tamp}
                </div>
                <div className='zwf'></div>
            </div>
            )
    }
}

const mapStateToProps = (state) => {
    let routename = state.publics.routename;
    let routehistory = state.publics.routehistory;
    let titleName = '';
    switch (routename) {
        case '/stores' :
            titleName = '实体门店';
            break;
        case '/chatonline' :
            titleName = '在线客服';
            break;
        case '/measurement':
            titleName = '10秒预约';
            break;
        case '/articles':
            titleName = '文章页';
            break;
        case '/baidumap':
            titleName = '在线地图';
            break;
        case '/maindetails':
            titleName = '详情';
            break;
        case '/list':
            titleName = '列表页';
            break;
        case '/homelist':
            titleName = '全屋页';
            break;
        default :
            titleName = '首页';
            break;
    }
    return {
        titleName: titleName,
        Tophistory: routehistory
    }

}
const mapDispatchToProps = {
    setTopNav: setTopNav
}
export default connect(mapStateToProps,mapDispatchToProps)(Top)